<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-touch-fullscreen" content="yes">
		<meta name="format-detection" content="telephone=no;email=no">

		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/iconfont.css">
		<link rel="stylesheet" href="../../css/style.css">
		<title>评论</title>
		<style>
			html,
			body,
			.mui-content {
				background-color: #fff;
			}
			
			ul {
				list-style: none;
				margin: 0;
				padding: 0;
			}
			
			.mui-bar-nav~.mui-content {
				padding-top: 88px;
			}
			
			.mui-scroll-wrapper {
				margin-bottom: 50px;
			}
			
			.mui-table-view:before {
				background-color: transparent;
			}
			
			.comments-head {
				position: fixed;
				top: 44px;
				left: 0;
				z-index: 9;
				width: 100%;
				padding: 0 10px;
				height: 44px;
				background-color: #fff;
				border-bottom: 1px solid #e3e3e3;
			}
			
			.comments-head h2 {
				font-size: 18px;
				line-height: 44px;
				font-weight: normal;
			}
			
			.comments-head h2 span {
				position: absolute;
				margin-top: -6px;
				border-bottom: 1px solid #159ceb;
			}
			
			.comments-head .mui-segmented-control {
				width: 90px;
				padding: 3px 0;
				margin-top: 10px;
				border: 1px solid #999;
				border-radius: 15px;
				background-color: #fff;
			}
			
			.comments-head .mui-segmented-control .mui-control-item {
				height: 17px;
				line-height: 17px;
				color: #999;
				font-size: 14px;
				border: none;
			}
			
			.comments-head .mui-segmented-control .mui-active {
				color: #000;
				background-color: #fff;
			}
			
			.comments-head .mui-segmented-control .mui-control-item:first-child {
				border-right: 1px solid #999;
			}
			
			.comments-list .mui-media-object {
				border-radius: 50%;
			}
			
			.comments-list .mui-media-body {
				word-wrap: break-word;
				white-space: normal;
				text-align: justify;
			}
			
			.mui-media-body .user-name {
				margin-bottom: 5px;
				color: #159ceb;
				font-size: 18px;
			}
			
			.mui-media-body .comment-time {
				margin-bottom: 5px;
				overflow: hidden;
				color: #999;
				font-size: 12px;
			}
			
			.mui-media-body .comment-time .iconfont {
				font-size: 20px;
			}
			
			.mui-media-body .comment-time .praise-num {
				font-size: 15px;
			}
			
			.mui-media-body .comment-text p {
				line-height: 1.4;
				font-size: 18px;
				color: #000;
			}
			
			.mui-media-body .comment-text:active {
				background-color: #ddd;
			}
			
			.comments-list .mui-table-view-cell a.mui-active {
				background-color: transparent;
			}
			
			.comments-bar {
				box-shadow: none;
			}
			
			.comments-bar .comments-options {
				position: relative;
				padding: 16px 14px 8px 14px;
				background-color: #e6e6e6;
			}
			
			.comments-bar .comments-options .comments-ipt {
				height: 30px;
				margin: 0;
				padding-left: 10px;
				padding-right: 60px;
				border: none;
			}
			
			.comments-bar .comments-options .publish-btn {
				position: absolute;
				right: 20px;
				top: 20px;
				z-index: 11;
				padding: 2px 10px;
				color: #999;
				background-color: #e6e6e6;
				border: none;
			}
			
			.mui-table-view-cell .reply-english-wrap {
				word-wrap: break-word;
			}
		</style>
	</head>

	<body>
		<input type="hidden" id="newsId" name="newsId" />
		<header class="mui-bar mui-bar-nav navbar-default">
			<a class="mui-action-back mui-icon iconfont mui-pull-left c-white">&#xe603;</a>
			<h1 class="mui-title c-white">评论</h1>
		</header>
		<div class="comments-head" id="commentsHead">
			<h2 class="mui-pull-left"><span>最新评论</span></h2>
			<div id="rank" class="mui-segmented-control mui-pull-right">
				<a class="mui-control-item mui-active" href="javascript:;" data-type="0">最新</a>
				<a class="mui-control-item" href="javascript:;" data-type="1">最热</a>
			</div>
		</div>
		<!-- 上拉加载容器 -->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<ul class="mui-table-view comments-list" id="commentsBody">
					
				</ul>
			</div>
		</div>
		<div class="mui-bar mui-bar-tab comments-bar">
			<div class="comments-options">
				<input id="commentsIpt" class="comments-ipt" type="text" placeholder="输入评论...">
				<button id="publishBtn" type="button" class="mui-btn publish-btn">发布</button>
			</div>
		</div>

		<script src="../../js/mui.min.js"></script>
		<script src="../../libs/zepto.min.js"></script>
		<script src="../../js/template.js"></script>
		<script src="../../js/common.js"></script>
		<!-- 评论列表 -->
		<script id="commentsList" type="text/html">
			{{each commentsls as value i}}
			<li class="mui-table-view-cell mui-media">
				<a href="javascript:;">
					<img class="mui-media-object mui-pull-left" src="{{value.replyUserPhoto}}" onerror="this.src='../../images/avatar.png'">
					<div class="mui-media-body">
						<div class="user-name">{{value.replyUserName}}</div>
						<div class="comment-time">
							<time>{{value.createAt}}</time>
							<div class="mui-pull-right">
								{{if value.replyUserId == value.user_token}}
								<span class="mui-icon mui-icon-trash js-remove" data-id="{{value.id}}"></span>&nbsp;&nbsp; {{/if}} {{if value.praiseOp == 0}}
								<i class="mui-icon iconfont" id="{{value.id}}">&#xe61f;</i> {{else}}
								<i class="mui-icon iconfont c-blue" id="{{value.id}}">&#xe61e;</i> {{/if}}
								<span class="praise-num" id="{{value.id}}_praiseNum">{{value.praiseNum}}</span>
							</div>
						</div>
						<div class="comment-text" data-id="{{value.id}}" data-name="{{value.replyUserName}}" data-replyUserId="{{value.replyUserId}}">
							{{if !value.editReplyUserId}}
							<p>{{value.reply}}</p>
							{{else}}
							<p>{{value.reply}}<span class="c-blue">&nbsp;&nbsp;|| {{value.editReplyUserName}}：</span><span class="c-gray">{{value.editReply}}</span></p>
							{{/if}}
						</div>
					</div>
				</a>
			</li>
			{{/each}}
		</script>
		<script>
			var count = 0; //上拉加载次数
			var pageSize = 5; //每页加载的数量
			var pageStart = 0;
			var currentDate = new Date().format("yyyy-MM-dd hh:mm:ss"); //上拉
			var newsId = null;
			var uuid = null;
			var order = 0;
			mui.init({
				beforeback: function() {
					var modeFlag = localStorage.getItem("modeFlag");
					if (modeFlag) {
						plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
						plus.navigator.setStatusBarBackground("#000");
					} else {
						var ws = plus.webview.currentWebview().opener();
						if (ws.id == "images-details.html") {
							plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
							plus.navigator.setStatusBarBackground("#000");
						}
					}
					//返回true，继续页面关闭逻辑
					return true;
				},
				pullRefresh: {
					container: '#pullrefresh',
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			//添加night自定义事件监听
			/*window.addEventListener('night', function(event) {
				lkg.nightMode();
			});*/
			mui.plusReady(function() {
				var modeFlag = localStorage.getItem("modeFlag");
				if (modeFlag) {
					plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
					plus.navigator.setStatusBarBackground("#000");
				} else {
					plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
					plus.navigator.setStatusBarBackground("#159ceb");
				}
				var self = plus.webview.currentWebview();
				newsId = self.newsId;
				uuid = plus.device.uuid; //获取设备的唯一标识
				count = 0; //上拉加载次数
				pageStart = 0;
				pageSize = 5; //每页加载的数量
				$("#commentsIpt").val("");
				$("#commentsBody").empty();
				//自动调整Webview窗口大小（屏幕区域减去软键盘区域）
				plus.webview.currentWebview().setStyle({
					softinputMode: "adjustResize"
				});
			});
			if (mui.os.plus) {
				mui.plusReady(function() {
					setTimeout(function() {
						mui('#pullrefresh').pullRefresh().pullupLoading();
					}, 100);
				});
			} else {
				mui.ready(function() {
					mui('#pullrefresh').pullRefresh().pullupLoading();
				});
			}
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				var currentTime = plus.storage.getItem("currentTimeComments") || currentDate;
				plus.nativeUI.showWaiting("", {width: "50px", height: "50px", background: "rgba(255, 255, 255, 0)", style: "black"});
				mui.ajax({
					url: baseUrl + '/news/getCommentsList?newsId=' + newsId + '&start=' + pageStart + '&length=' + pageSize + '&order=' + order + '&createAt=' + currentTime + '&devicesId=' + uuid,
					dataType: 'json',
					type: 'get',
					success: function(data) {
						var newTime = new Date().format("yyyy-MM-dd hh:mm:ss");
						plus.storage.setItem("currentTimeComments", newTime); //保存上一次下拉刷新的时间
						if (data.returnFlag == 0) {
							mui('#pullrefresh').pullRefresh().endPullupToRefresh((pageStart >= data.total)); //参数为true代表没有更多数据了
							mui.each(data.commentsls, function(index, value) {
								value.createAt = Humanize(value.createAt);
								value.user_token = plus.storage.getItem("user_token");
							});
							var listHtml = template('commentsList', data);
							count++;
							pageStart = pageSize * count;
							$("#commentsIpt").val("");
							$("#commentsBody").append(listHtml);
							plus.nativeUI.closeWaiting();
						}
					},
					error: function(xhr, type, errorThrown) {
						//异常处理
						throwGetNewsError();
					}
				});
			}
			//选项卡的点击事件
			mui('#rank').on('tap', 'a', function(e) {
				order = $(this).attr('data-type');
				count = 0;
				pageStart = 0;
				$("#commentsBody").empty();
				mui('#pullrefresh').pullRefresh().refresh(true); //重置上拉加载
				pullupRefresh();
			});
			//回复评论
			mui("#commentsBody").on("tap", ".comment-text", function() {
				var name = $(this).attr("data-name");
				var commentsId = $(this).attr("data-id");
				var user_token = plus.storage.getItem("user_token");
				var replyUserId = $(this).attr("data-replyUserId");
				if (replyUserId == user_token) {
					$("#commentsIpt").attr("placeholder", "输入评论...");
					$("#commentsIpt").data("commentsId", "");
				} else {
					$("#commentsIpt").attr("placeholder", "回复" + name + "：");
					$("#commentsIpt").data("commentsId", commentsId);
				}
				openSoftKeyboard("commentsIpt"); //自动弹出键盘
			});
			$("#commentsIpt").on("blur", function(){
				$(this).attr("placeholder", "输入评论...");
			});
			$("#commentsIpt").on("input propertychange", function() {
				var value = $.trim($(this).val());
				if (value != "") {
					$(this).next(".mui-btn").addClass("c-white bg-blue");
				} else {
					$(this).next(".mui-btn").removeClass("c-white bg-blue");
				}
			});
			//发布评论并更新评论列表
			document.getElementById("publishBtn").addEventListener("tap", function() {
				var commentsId = null;
				var commentsIpt = $("#commentsIpt").val();
				var regBlank = /\s+/;
				var reply = commentsIpt.replace(regBlank, " ");
				if ($("#commentsIpt").data("commentsId") == "") {
					commentsId = 0;
				} else {
					commentsId = $("#commentsIpt").data("commentsId");
				}
				reply = $.trim(reply);
				if (reply.length == 0) {
					mui.toast("还是要输入点东西吧!");
					return false;
				}
				var reg = /[\~\`\@\#\$\^\&\*\_\+\=\|\\\[\]\{\}\<\>\/]+/;
				if (reg.test(reply)) {
					mui.toast("还是去掉特殊字符吧!");
					return false;
				}
				
				if (isLogin()) {
					mui.ajax({
						url: baseUrl + '/news/createComments?devicesId=' + uuid + '&newsId=' + newsId + '&reply=' + reply + '&isAnonymous=0' + '&commentsId=' + commentsId,
						dataType: 'json',
						type: 'get',
						success: function(data) {
							if (data.returnFlag == 0) {
								if (data.appUserInfoState != 0) {
									plus.nativeUI.alert(data.returnMsg);
								} else {
									mui.toast('提交成功,请耐心等待审核');
								}
								pageStart = 0;
								count = 0;
								$("#commentsBody").empty();
								$("#commentsIpt").val("");
								$("#commentsIpt").data("commentsId", "");
								$("#commentsIpt").attr("placeholder", "输入评论...");
								var newTime = new Date().format("yyyy-MM-dd hh:mm:ss");
								plus.storage.setItem("currentTimeComments", newTime); //保存上一次下拉刷新的时间
								mui('#pullrefresh').pullRefresh().refresh(true); //重置上拉加载
								mui('#pullrefresh').pullRefresh().pullupLoading();
							}
						},
						error: function(xhr, type, errorThrown) {
							//异常处理
							throwGetNewsError();
						}
					});
				} else {
					mui.openWindow({
						url: '../my_center/login.html',
						id: 'login.html',
						waiting: {
							autoShow: false
						}
					});
				}
			});
			//点赞按钮
			mui('.mui-table-view').on('tap', 'i', function(e) {
				var $this = $(this);
				var commentsId = this.getAttribute('id');
				//根据id向服务器请求
				var _praiseNum = $("#" + commentsId + "_praiseNum").html();
				mui.ajax({
					url: baseUrl + '/news/createCommentsPraise?devicesId=' + uuid + '&newsId=' + newsId + '&commentsId=' + commentsId,
					dataType: 'json',
					type: 'get',
					success: function(data) {
						if (data.returnFlag == 0) {
							if (data.returnFlagCode == 'P001') {
								_praiseNum++;
								$this.addClass("c-blue").html("&#xe61e;");
								$("#" + commentsId + "_praiseNum").html(_praiseNum);
							} else if (data.returnFlagCode == 'P002') {
								_praiseNum--;
								$this.removeClass("c-blue").html("&#xe61f;");
								$("#" + commentsId + "_praiseNum").html(_praiseNum);
							}
						}
					},
					error: function(xhr, type, errorThrown) {
						//异常处理
						throwGetNewsError();
					}
				})
			});
			//清空按钮
			var btnArray = ['确认', '取消'];
			mui('.mui-table-view').on('tap', '.js-remove', function(e) {
				var commentsId = $(this).attr("data-id");
				var li = $(this).closest(".mui-table-view-cell");
				mui.confirm('确认要删除吗？', '提示', btnArray, function(e) {
					if (e.index == 0) {
						mui.ajax({
							url: baseUrl + '/news/delPl?id=' + commentsId + '&newsId=' + newsId,
							dataType: 'json',
							type: 'get',
							success: function(data) {
								if (data.returnFlag == 0) {
									li.remove();
									mui('#pullrefresh').pullRefresh().refresh(true); //重置上拉加载
									mui('#pullrefresh').pullRefresh().pullupLoading();
								}
							},
							error: function(xhr, type, errorThrown) {
								//异常处理
								throwGetNewsError();
							}
						});
					}
				});
			});
		</script>
	</body>

</html>